<!DOCTYPE html>
<html lang="en">
  <head>
		<?php include("view/head.php"); ?>
		
  </head>
  <body>
	<?php include("view/main-menu.php"); ?>	
	<div class="main">
		<div class="main-container">
			<div class="row nomargin row-space-5 row-space-top-5 ">
				<h3 class="text-center">List Your Space</h3>
				<h4 class="text-center">Airbnb lets you make money renting out your place.</h4>
			</div>
			
		</div>
		<div class="main-container panel-medium">
			<div class="row nomargin">
					 			
					          <div class="row row-space-5 row-space-top-5 row-table">
					            <div class="col-sm-3 col-md-3 text-right col-middle">
					              <div class="h4 text-light">
					                Home Type
					              </div>
					            </div>
					            <div class="col-sm-9 col-md-9 fieldset fieldset_property_type_id col-middle">
					              <div class="btn-group">
					    <button class="btn btn-large white" id="apartment" onclick="$('#hometype,#home,#bed,#other').toggle();" >
					      <i class="icon glyphicon-home h4 icon-kazan"></i>
					      Apartment
					    </button>
					    <button class="btn btn-large white" id="home" onclick="$('#apartment,#bed,#other,#hometype').toggle();" >
					      <i class="icon glyphicon-phone-alt h4 icon-kazan"></i>
					      House
					    </button>
					    <button class="btn btn-large white" id="bed" onclick="$('#apartment,#home,#other,#hometype').toggle();" >
					      <i class="icon glyphicon-cutlery h4 icon-kazan"></i>
					      Bed &amp; Breakfast
					    </button>
					    
					    
					  <div class="select select-large" id="other" style="display: inline;" onchange="$('#apartment,#home,#bed,#hometype').toggle();">
					    <select class="white">
					      <option disabled="" selected="">Other</option>
					        <option data-icon-class="icon-star-alt" data-name="Loft" data-type-id="35">
					          Loft
					        </option>
					        <option data-icon-class="icon-star-alt" data-name="Cabin" data-type-id="4">
					          Cabin
					        </option>
					        <option data-icon-class="icon-star-alt" data-name="Villa" data-type-id="11">
					          Villa
					        </option>
					        <option data-icon-class="icon-star-alt" data-name="Castle" data-type-id="5">
					          Castle
					        </option>
					        <option data-icon-class="icon-star-alt" data-name="Dorm" data-type-id="9">
					          Dorm
					        </option>
					        <option data-icon-class="icon-star-alt" data-name="Treehouse" data-type-id="6">
					          Treehouse
					        </option>
					        <option data-icon-class="icon-star-alt" data-name="Boat" data-type-id="8">
					          Boat
					        </option>
					        <option data-icon-class="icon-star-alt" data-name="Plane" data-type-id="28">
					          Plane
					        </option>
					        <option data-icon-class="icon-star-alt" data-name="Camper/RV" data-type-id="32">
					          Camper/RV
					        </option>
					        <option data-icon-class="icon-star-alt" data-name="Igloo" data-type-id="12">
					          Igloo
					        </option>
					        <option data-icon-class="icon-star-alt" data-name="Lighthouse" data-type-id="10">
					          Lighthouse
					        </option>
					        <option data-icon-class="icon-star-alt" data-name="Yurt" data-type-id="15">
					          Yurt
					        </option>
					        <option data-icon-class="icon-star-alt" data-name="Tipi" data-type-id="16">
					          Tipi
					        </option>
					        <option data-icon-class="icon-star-alt" data-name="Cave" data-type-id="18">
					          Cave
					        </option>
					        <option data-icon-class="icon-star-alt" data-name="Island" data-type-id="19">
					          Island
					        </option>
					        <option data-icon-class="icon-star-alt" data-name="Chalet" data-type-id="22">
					          Chalet
					        </option>
					        <option data-icon-class="icon-star-alt" data-name="Earth House" data-type-id="23">
					          Earth House
					        </option>
					        <option data-icon-class="icon-star-alt" data-name="Hut" data-type-id="24">
					          Hut
					        </option>
					        <option data-icon-class="icon-star-alt" data-name="Train" data-type-id="25">
					          Train
					        </option>
					        <option data-icon-class="icon-star-alt" data-name="Tent" data-type-id="34">
					          Tent
					        </option>
					        <option data-icon-class="icon-star-alt" data-name="Other" data-type-id="33">
					          Other
					        </option>
					    </select>
					  </div>
					
					
					<div class="active-message active-col" id="hometype">
       						 &nbsp;&nbsp;Airbnb guests love the variety of home types available.
      				</div>
						
					</div>
					
					            </div>
					          </div>
					          <div class="row row-space-5  row-space-top-5 row-table">
					            <div class="col-sm-3 col-md-3 text-right col-middle">
					              <div class="h4 text-light">
					                Room Type
					              </div>
					            </div>
					            <div class="col-sm-9 col-md-9 fieldset fieldset_room_type col-middle">
					              <div class="btn-group">
					
					    <button class="btn btn-large white" id="entire" onclick="$('#private,#shared,#roomtype').toggle();" >
					      <i class="icon glyphicon-music h4 icon-kazan"></i>
					      Entire home/apt
					    </button>
					
					
					    <button class="btn btn-large white" id="private" onclick="$('#entire,#shared,#roomtype').toggle();" >
					      <i class="icon glyphicon-star h4 icon-kazan"></i>
					      Private room
					    </button>
					
					
					    <button class="btn btn-large white" id="shared" onclick="$('#entire,#private,#roomtype').toggle();" >
					      <i class="icon glyphicon-glass h4 icon-kazan"></i>
					      Shared room
					    </button>
					
					<div class="active-message active-col" id="roomtype">
       						 &nbsp;&nbsp;   Room type is one of the most important criteria for Airbnb guests.
      
      				</div>
					</div>
					
					            </div>
					          </div>
					          <div class="row row-space-5 row-space-top-5 row-table">
					            <div class="col-sm-3 col-md-3 text-right col-middle">
					              <div class="h4 text-light">
					                Accommodates
					              </div>
					            </div>
					            <div class="col-sm-9 col-md-9 fieldset fieldset_person_capacity col-middle">
					              <div class="row">
									<div class="col-sm-5 col-md-4">
								    <div class="panel2">
								      <div class="panel-body panel-light">
								        <div class="row row-table">
								          <div class="col-sm-2 col-md-2 col-middle">
								            <i class="icon glyphicon-user h4 icon-kazan"></i>
								          </div>
								          <div class="col-sm-6 col-md-6 col-middle">
								            <div class="select select-large">
								              <select id="accomodates-select">
								                  <option class="accommodates" data-accommodates="1">
								                    1
								                  </option>
								                  <option class="accommodates" data-accommodates="2">
								                    2
								                  </option>
								                  <option class="accommodates" data-accommodates="3">
								                    3
								                  </option>
								                  <option class="accommodates" data-accommodates="4">
								                    4
								                  </option>
								                  <option class="accommodates" data-accommodates="5">
								                    5
								                  </option>
								                  <option class="accommodates" data-accommodates="6">
								                    6
								                  </option>
								                  <option class="accommodates" data-accommodates="7">
								                    7
								                  </option>
								                  <option class="accommodates" data-accommodates="8">
								                    8
								                  </option>
								                  <option class="accommodates" data-accommodates="9">
								                    9
								                  </option>
								                  <option class="accommodates" data-accommodates="10">
								                    10
								                  </option>
								                  <option class="accommodates" data-accommodates="11">
								                    11
								                  </option>
								                  <option class="accommodates" data-accommodates="12">
								                    12
								                  </option>
								                  <option class="accommodates" data-accommodates="13">
								                    13
								                  </option>
								                  <option class="accommodates" data-accommodates="14">
								                    14
								                  </option>
								                  <option class="accommodates" data-accommodates="15">
								                    15
								                  </option>
								                  <option class="accommodates" data-accommodates="16+">
								                    16+
								                  </option>
								              </select>
								            </div>
								          </div>
								        </div>
								      </div>
								    </div>
									</div>
								</div>
					
					            </div>
					          </div>
					          <div class="row row-space-5 row-space-top-5 row-table">
					            <div class="col-sm-3 col-md-3 text-right col-middle">
					              <div class="h4 text-light">City</div>
					            </div>
					            <div class="col-sm-9 col-md-9 fieldset fieldset_city col-middle">
					              <div class="row">
					  <div class="col-sm-6 col-md-6">
					    <div class="panel2 location">
					      <div class="panel-body panel-light panel-border location-panel-body">
					        <i class="icon icon glyphicon-plane icon-kazan h4"></i>
					        <input id="location_input" name="location_input" placeholder="San Francisco, Rome, Shibuya..." type="text" class="geocomplete" autocomplete="off">
					
					      </div>
					    </div>
					  </div>
					</div>
					
					 </div>
					          </div>
					          <div class="row row-space-5 row-space-top-5 row-table">
					          	
					            <div class="col-sm-9 col-md-9 col-sm-offset-3 col-md-offset-3" id="js-submit-button"><button type="submit" class="btn btn-primary2 btn-large submit
					               disabled " disabled="disabled">
					  Continue
					</button>
					</div>
					          </div>
					
			</div>
		</div>
	</div>
	<hr class="line"></hr>
	
	<?php include("view/footer.php"); ?>
	
	

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-1.11.1.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>